<template>
	<div class="contact">
		<div class="section">
			<div class="section-container">
				<ul v-if="formData">
					<li>
						<label>
							<dl class="form-group-flex" :class="{'warn': $v.formData.name.$error}">
								<dd class="form-group-flex-item">姓名</dd>
								<dd class="form-group-flex-item">
									<input type="text" placeholder="必填"
										v-model.trim="formData.name"
										@input="$v.formData.name.$touch()">
								</dd>
								<dd class="form-group-flex-item"></dd>
							</dl>
						</label>
					</li>
					<li>
						<label>
							<dl class="form-group-flex" :class="{'warn': $v.formData.mobile.$error}">
								<dd class="form-group-flex-item">主手机</dd>
								<dd class="form-group-flex-item">
									<input type="tel" placeholder="必填(国际手机号码需要添加国家码)"
										v-model.trim="formData.mobile"
										@input="$v.formData.mobile.$touch()">
								</dd>
								<dd class="form-group-flex-item"></dd>
							</dl>
						</label>
					</li>
					<li>
						<label>
							<dl class="form-group-flex">
								<dd class="form-group-flex-item">部门</dd>
								<dd class="form-group-flex-item">
									<span v-if="formData.departmentId!=0">
										{{formData.departmentName}}
									</span>
									<span v-if="!formData.departmentName||formData.departmentId==0" style="color: #7D7D7D;">选填</span>
								</dd>
								<dd class="form-group-flex-item" @click="$router.push({name: 'department_seletor'})"><i class="icon-arrowRight"></i></dd>
							</dl>
						</label>
					</li>
					<li>
						<label>
							<dl class="form-group-flex">
								<dd class="form-group-flex-item">职位</dd>
								<dd class="form-group-flex-item">
									<input type="text" placeholder="选填"
										v-model.trim="formData.position[0]">
								</dd>
								<dd class="form-group-flex-item"></dd>
							</dl>
						</label>
					</li>
					<li>
						<label>
							<dl class="form-group-flex" :class="{'warn': $v.formData.email.$error}">
								<dd class="form-group-flex-item">邮箱</dd>
								<dd class="form-group-flex-item">
									<input type="email" placeholder="选填"
										v-model.trim="formData.email[0]"
										@input="$v.formData.email.$touch()">
								</dd>
								<dd class="form-group-flex-item"></dd>
							</dl>
						</label>
					</li>
					<li>
						<label>
							<dl class="form-group-flex">
								<dd class="form-group-flex-item">等级</dd>
								<dd class="form-group-flex-item">
									<span>{{formData.contactLevel}}</span>
									<span v-if="!formData.contactLevel" style="color: #7D7D7D;">选填</span>
								</dd>
								<dd class="form-group-flex-item" @click="$router.push({name: 'contactLevel_seletor'})"><i class="icon-arrowRight"></i></dd>
							</dl>
						</label>
					</li>
					<li>
						<label>
							<dl class="form-group-flex" :class="{'warn': $v.formData.sort.$error}">
								<dd class="form-group-flex-item">排序值</dd>
								<dd class="form-group-flex-item">
									<input type="text" placeholder="选填(联系人排序，1为最前)"
										v-model.trim="formData.sort"
										@input="$v.formData.sort.$touch()">
								</dd>
								<dd class="form-group-flex-item"></dd>
							</dl>
						</label>
					</li>
				</ul>
			</div>
		</div>
		<div class="footer">

			<button class="btn btn-submit"
				@click="update(formData)"
				v-if="formData&&formData.mobile&&!($v.validationGroup.error||$v.validationGroup.$invalid)">
				完成
			</button>
			<button class="btn btn-submit unable" v-else>完成</button>

			<button class="btn btn-delete"
				@click="bus.$emit('confirmModal', true)"
				v-if="formData&&formData.mobile&&cache.mobile!=formData.mobile">
				删除联系人
			</button>
			<button class="btn btn-delete unable" v-else>删除联系人</button>
		</div>

		<com-confirm
			:title="'确定删除该联系人？'"
			:cancel="confirmCancel"
			:sure="confirmSure"
		>(是否将该联系人删除并从所在部门删除？)</com-confirm>
	</div>
</template>

<script>

	import { required, numeric, minLength, maxLength, email } from 'vuelidate/lib/validators'
	import ComConfirm from '@/components/comfirm';

	export default {

	  	name: 'contact',

	  	components: {
	  		ComConfirm
	  	},

	  	data () {
		    return {
		    	type: 0, // 0：新增， 1：编辑
		    	formData: null
		    };
	  	},

	  	beforeRouteEnter (to, from, next) {
			vm.$http.post(vm.api.eab, {
  				module: 'contact',
  				action: 'getContactListByContactIds',
				contactIds: [to.params.id]
  			}, {showLoading: true}).then(
  				res => {
  					if (res.body.result === 1) {
  						if (from.name == 'department_seletor') {
			  				vm.$store.commit('contactEditFormData/getDepartments', vm.$store.state.departmentSeletor.departments);
			  			} else if (from.name == "contactLevel_seletor") {
			  				vm.$store.commit('contactEditFormData/setContactLevel', vm.$store.state.contactLevelSelector.level);
			  			} else {
			  				let departments = [{
			  					departmentId: res.body.data[0].departmentId,
								departmentName: res.body.data[0].departmentName
			  				}];
			  				vm.$store.commit('departmentSeletorReset');
			  				vm.$store.commit('contactEditFormData/init', res.body.data[0]);
			  				vm.$store.commit('contactEditFormData/getDepartments', departments);
			  				vm.$store.commit('departmentSeletorSet', departments);
			  			}
				  		next(vm => {
				  			vm.initFormData();
				  		});
  					}
  				}
  			);
	  	},

	  	created () {
	  		fxAPI.api('setAppTitle', {title: '编辑联系人'});
	  	},

	  	methods: {
	  		initFormData (data) {
	  			this.formData = this.$store.state.contactEditFormData.formData;
	  		},

	  		/**
	  		 * 获取联系人详情
	  		 * @param  {[type]} contactId [description]
	  		 * @return {[type]}           [description]
	  		 */
	  		getContactDetail (contactId) {
	  			return new Promise((resolve, reject) => {
	  				this.$http.post(this.api.itemGet, {
		  				contactId: contactId
		  			}, {showLoading: true}).then(
		  				res => {
		  					if (res.body.result === 1) {
		  						resolve(res.body.item);
		  					}
		  				}
		  			);
	  			});
	  		},

	  		/**
	  		 * 保存修改信息
	  		 * @param  {Object} data 保存的信息
	  		 *
	  		 */
	  		update (data) {
	  			data = Object.assign(data, {module: 'contact', action: 'updateContact', contactId: this.$route.params.id});
	  			this.$http.post(this.api.eab, data).then(
                    res => {
                        if (res.body.result === 1) {
                        	// this.$toasted.show(res.body.errorMsg);
                            vm.$toast.show({
                                text:res.body.errorMsg,
                                translate:true
                            })
                        	this.$router.go(-1);
                        }
                    }
                );
	  		},

	  		/**
	  		 * 删除联系人
	  		 * @return Promise
	  		 */
	  		del () {
  				this.$http.post(this.api.eab, {
  					module: 'contact',
	  				action: 'deleteContactList',
	  				contactIds: [this.$route.params.id]
	  			}, {showLoading: true}).then(
	  				res => {
	  					if (res.body.result === 1) {
	  						this.$toasted.show(res.body.errorMsg);
  							this.$router.go(-1);
	  					}
	  				}
	  			);
	  		},

	  		confirmCancel () {
	  			this.bus.$emit('confirmModal', false);
	  		},

	  		confirmSure () {
	  			this.bus.$emit('confirmModal', false);
	  			this.del();
	  		}
	  	},

	  	validations: {
          	formData: {
	          	name: {
	          		required
	          	},
	          	mobile: {
	          		required,
	              	minLength: minLength(11),
		            maxLength: maxLength(12),
		            isUnique (value) {
		                return /^(\+{0,1}\d{11})$/g.test(value);
		            }
	          	},
	            sort: {
	              	numeric
	            },
	        	email: {
	        		email
	        	}
          	},
          	validationGroup: ['formData']
        }
	};
</script>

<style lang="scss" scoped>
	@import '../scss/mixin.scss';
	.contact{
		@include app-top-main-bottom(0, 220px);

		ul{
			width: 100%;
			background: #fff;
			li{
				&:last-child{
					dd{
						&:after{
							border-bottom: none !important;
						}
					}
				}
			}
		}
		.form-group-flex{
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			width: 100%;
			height: 100px;
			line-height: 100px;
			font-size: 28px;
			padding-left: 20px;
			box-sizing: border-box;

			&.warn{
				background: #f5cfc9;
			}

			input{
				background: transparent;
			}

			&-item{
				position: relative;
				-webkit-box-flex: 1;
				    -ms-flex-positive: 1;
				        flex-grow: 1;
				height: 100%;
				text-align: left;
				@include text-ellipsis();
				@include border-1px(#dcdcdc);
			}
			&-item:first-child{
				-webkit-box-flex: 0;
				    -ms-flex-positive: 0;
				        flex-grow: 0;
				-ms-flex-preferred-size: 100px;
				    flex-basis: 100px;
				min-width: 100px;
				text-align: left;
			}
			&-item:nth-child(2){
				padding-left: 10px;
				box-sizing: border-box;
				input{
					width: 100%;
				}
			}
			&-item:last-child{
				-webkit-box-flex: 0;
				    -ms-flex-positive: 0;
				        flex-grow: 0;
				-ms-flex-preferred-size: 60px;
				    flex-basis: 60px;
				min-width: 60px;
				text-align:center;
			}
		}

		.btn{
			margin-top: 10px;
		}
	}

</style>
